<template>
   <div>
      <el-dialog v-model="prop.is.isShow" :title="prop.is.isAdd ? '添加菜单' : '编辑菜单'" :before-close="cancel">

         <el-form :model="userForm" :rules="rules" ref="userRef">
            <!-- 所属角色 -->
            <el-form-item label="所属角色" prop="roleid" :label-width="formLabelWidth">
               <el-select placeholder="请选择所属角色" v-model="userForm.roleid">
                  <el-option v-for="item in store.getters['role/getRolelist']" :key="item.id" :label="item.rolename"
                     :value="item.id" />
               </el-select>
            </el-form-item>

            <!-- 用户名称 -->
            <el-form-item label="用户名称" prop="username" :label-width="formLabelWidth">
               <el-input v-model="userForm.username" autocomplete="off" />
            </el-form-item>

            <!-- 密码 -->
            <el-form-item label="密码" prop="rolename" :label-width="formLabelWidth">
               <el-input v-model="userForm.password" autocomplete="off" />
               {{ prop.is.isAdd?'':"留空不修改" }}
            </el-form-item>

            <!-- 状态 -->
            <el-form-item label="状态" :label-width="formLabelWidth">
               <el-switch v-model="userForm.status" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ccc"
                  :active-value="1" :inactive-value="2" />
            </el-form-item>
         </el-form>

         <template #footer>
            <span class="dialog-footer">
               <el-button @click="cancel">取消</el-button>
               <el-button type="primary" @click="enter">确认</el-button>
            </span>
         </template>
      </el-dialog>
   </div>
</template>


<script lang='ts' setup>
//引入接收父组件传过来的数据 ->defineProps    响应式数据 ->reactive  这里是为了获取DOM节点 ->ref
import { defineProps, reactive, ref, defineExpose } from "vue";
//引入仓库 Vuex
import { useStore } from "vuex";
//引入element-plus 封装好的验证规则
import { FormRules, FormInstance, ElMessage } from 'element-plus';
//引入编辑或添加接口->addOrEditRole  获取一条数据 ->userInfo
import { addOrEditUser, userInfo } from "../../request/api";


//=================数据================
//弹窗左侧文字宽度
const formLabelWidth = '120px';
//父组件传过来的数据
let prop: any = defineProps({
   is: Object
});
//创建仓库
const store = useStore();
//创建表单ref
const userRef = ref<FormInstance>()
//创建表单数据
let userForm = reactive({
   status: 1,
   roleid: '',
   password: '',
   username: ''
});
//创建表单验证规则
const rules = reactive<FormRules>({
   username: [
      { required: true, message: '请输入用户名称', trigger: 'blur' },
      { min: 2, max: 8, message: '长度应在2-8', trigger: 'blur' },
   ],
   roleid: [
      { required: true, message: '请选择所属角色', trigger: 'change' }
   ]
});




//================事件=================
//获取角色列表渲染  如果有不获取 如果没有在获取
if (store.getters['role/getRolelist'].length == 0) {
   store.dispatch('role/changeRoleAction');
}
//点击取消事件
const cancel = () => {
   //关闭弹窗
   prop.is.isShow = false;
   //清空表单
   userForm = reactive({
      status: 1,
      roleid: '',
      password: '',
      username: ''
   });
   //清空验证规则
   userRef.value?.resetFields();
};

//点击确认事件
const enter = () => {
   let url = prop.is.isAdd ? "/useradd" : '/useredit';

   //表单验证
   userRef.value?.validate(async (val: boolean) => {
      //通过验证
      if (val) {
         let res: any = await addOrEditUser(url, userForm);
         //判断是否通过
         if (res.code == 200) {
            //成功提示
            ElMessage.success(res.msg);
            //关闭弹窗
            cancel();
            //重新获取数据
            store.dispatch('user/changeUserAction');
            //重新获取总数
            store.dispatch('user/changeTotalAction')
         } else {
            //失败提示
            ElMessage.error(res.msg);
         }
      };
   })
};

//数据回显 
const lookup = async (uid: any) => {
   //调用获取一条数据
   let res: any = await userInfo({ uid });
   //判断是否获取成功
   if (res.code == 200) {
      Object.assign(userForm, res.list, { uid });
      userForm.password = "";
   } else {
      ElMessage.error('User编辑回显获取失败'+res.msg);
   }
};

//暴露回显方法 才能在父组件里面使用
defineExpose({
   lookup
})


</script>


<style lang='less' scoped></style>